<template>
  <div class="bgColor">
    <!-- 1.0 首页头部 -->
    <div class="header">
      <!-- 左边logo图标 -->
      <span class="iconfont iconnew"></span>
      <!-- 中间搜索框 -->
      <div class="search" @click="$router.push('/search')">
        <i class="iconfont iconsearch"></i>
        <span>搜索新闻</span>
      </div>
      <!-- 右侧 个人中心图标 -->
      <span class="iconfont iconwode" @click="$router.push('/userinfo')"></span>
    </div>
    <!-- 2.0 tabs 分类切换 -->
    <van-tabs sticky v-model="activeIndex">
      <van-tab :title="item.name" v-for="item in cateList" :key="item.id">
        <!-- 用 Vant 的 List组件包裹 PostItem -->
        <van-list
          v-model="item.loading"
          :finished="item.finished"
          finished-text="没有更多了"
          @load="loadMorePost"
          :immediate-check="false"
        >
          <!-- 遍历的时候只需要遍历当前分类里面的 postList属性即可 -->
          <PostItem
            v-for="item2 in item.postList"
            :key="item2.id"
            :postData="item2"
          />
        </van-list>
      </van-tab>
    </van-tabs>
    <!-- 3.0 新闻列表 -->
  </div>
</template>

<script>
import { getCategory, getPostList } from "@/api";
import PostItem from "@/components/PostItem.vue";
import { getManage } from "@/utils/local";
// @ is an alias to /src
export default {
  name: "Home",
  components: { PostItem },
  data() {
    return {
      activeIndex: 0,
      // 分类列表
      cateList: [],
      // 新闻列表
      postList: [],
    };
  },
  //变量监听
  watch: {
    activeIndex(index) {
      // console.log('watch',index)
      // const id = this.cateList[index].id
      if (index === this.cateList.length - 1) {
        return this.$router.push("/manage");
      }
      // 如果当前选项卡的 postList 数组长度为 0，才重新的发送请求
      if (this.cateList[index].postList.length === 0) {
        this.getPostListDate();
      }
    },
  },
  created() {
    // 调用获取栏目列表封装的 API
    getCategory().then((res) => {
      // console.log(res);
      // 把返回的数据先 map 映射成数组
      // cateList 数组的每项中都添加一个 postList 空数组[]，防止其他地方调用数组 lenght 的时候报错
      // this.cateList = res.data.data
      /* 首页展示的栏目也要分两种情况：1.如果有本地存储，直接使用，2. 没本地存储，发送请求获取 */
      const { activeList } = getManage();
      if (activeList) {
        this.cateList = activeList.map((item) => {
          // return 返回处理后的对象
          return {
            // 先把原本的 item 返回来，注意这里需要 ... 展开对象
            ...item,
            // 额外给每一项都初始化一个空数组，防止其他地方调用数组 length 属性的时候报错
            postList: [],
            // 页码的初始化，到时候滚动触底的时候，再让某个分类的页码加 1
            pageIndex: 1,
            pageSize: 5,
            loading: false,
            finished: false,
          };
        });
      }
      // 添加一个向下的箭头
      this.cateList.push({ name: "🔽" });
      // 调用组件上自己的方法，this 表示当前的 Vue 组件
      this.getPostListDate();
      // 走了情况1：获取本地存储，代码就无需继续往后运行了
      return;
    });
  },
  methods: {
    //注册加载下一页的函数
    loadMorePost() {
      // console.log('下一页ok')
      this.cateList[this.activeIndex].pageIndex += 1;
      this.getPostListDate();
    },
    getPostListDate() {
      // id获取的优化
      const { id, pageSize, pageIndex } = this.cateList[this.activeIndex];
      // 调用封装的API，记得检查自动导入是否正确
      //获取文章列表
      getPostList({
        category: id,
        pageSize: pageSize,
        pageIndex: pageIndex,
      }).then((res) => {
        console.log(res);
        // 把返回的新闻列表变成了分类对象的子属性
        // this.postList = res.data.data
        // console.log(this.activeIndex)
        // BUG2 把分页加载回来的数据，覆盖掉了源数据
        // this.cateList[this.activeIndex].postList = res.data.data
        // 把新获取到的分页数据追加到原本的数组中，注意这里需要用 ... 展开数组后再追加
        this.cateList[this.activeIndex].postList.push(...res.data.data);
        // 加载完成就把 loading 状态取消掉
        this.cateList[this.activeIndex].loading = false;
        //检测是否已经结束，是否还需要加载下一页，检测条件：当前的数组长度是否已经等于总条数
        if (
          this.cateList[this.activeIndex].postList.length === res.data.total
        ) {
          // 修改成结束状态即可
          this.cateList[this.activeIndex].finished = true;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.bgColor {
  background-color: #f2f2f2;
}
// 箭头是倒数的第二个孩子
/deep/ .van-tab:nth-last-child(2) {
  background-color: #fff;
  position: sticky;
  right: -8px;
  // 把组件默认的 flex 值覆盖掉
  flex: 0 0 44px;
}
.header {
  display: flex;
  align-items: center;
  height: 50px;
  background-color: red;
  color: #fff;
  padding: 0 15px;
  .iconnew {
    font-size: 45px;
  }
  .search {
    flex: 1;
    height: 34px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 20px;
    .iconsearch {
      margin-right: 3px;
    }
    span {
      font-size: 12px;
    }
  }
  .iconwode {
    font-size: 25px;
  }
}
</style>
